<template>
  <div class="box" style="height: 100vh;background-image: linear-gradient(135deg, #1E06F3FF, #F60388FF);overflow: hidden;">
    <!-- 路由跳转到登录 -->
    <el-container>
    <el-header style="height: 80px; background-color: #0c3be3; display: flex; align-items: center; justify-content: space-between; padding: 0;">
      <div style="display: flex; align-items: center;">
        <img src="login/logo.jpg" style="height: 50px; margin-left: 25px; margin-right: 10px;">
        <img src="login/auto.jpg" style="height: 50px; margin-right: 10px;">
        <img src="login/verticalLine.png" style="height: 50px;">
        <span style="color:#fff; font-size:30px; font-weight:bold; margin-left: 0px; margin-right: 20px;">梦想起航-扬帆远航校园招聘系统</span>
      </div>
      <div>
        <span style="display: inline-block; vertical-align: middle;">已经有账号了？点击下方按钮跳转登录</span>
        <el-button type="primary" @click="login" style="margin-left: 10px; vertical-align: middle;">登录</el-button>
      </div>
    </el-header>
      <el-main>
        <el-row :gutter="40">
          <el-col :span="16">
            <img src="/login/studentlogin.png" style="width:55%;margin-top:0px; margin-left:200px;">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px" >
              <h2>用户注册</h2>
              <el-form
                  :model="ruleForm"
                  ref="ruleForm"
                  label-width="80px"
                  class="demo-ruleForm"
                  label-position="left"
                  id="loginForm"
                  :rules="rules"
                  hide-required-asterisk
              >
                <el-form-item
                    label="账号名"
                    prop="username"
                    :rules="{
            required: true,
            message: '账号名不能为空',
            trigger: 'blur',
          }"
                >
                  <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                    prop="email"
                    label="邮箱"
                    :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]"
                >
                  <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                    :rules="{
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          }"
                >
                  <el-input
                      type="password"
                      v-model="ruleForm.password"
                      autocomplete="off"
                      show-password
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input
                      type="password"
                      v-model="ruleForm.checkPass"
                      show-password
                      auto-complete="new-password"
                  ></el-input>
                </el-form-item>
                <!-- 注册表单按钮 -->
                <el-form-item>
                  <el-button type="primary" @click="handleSubmit">注册</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import router from "@/router";
// 验证确认密码是否与密码一致
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== ruleForm.password) {
    callback(new Error('两次输入的密码不一致!'));
  } else {
    callback();
  }
};


// 定义表单数据模型
const ruleForm = reactive({
  username: '',
  email: '',
  password: '',
  checkPass: ''
});
// 定义表单引用
const ruleFormRef = ref(null);
// 定义表单验证规则
const rules = {
  username: [{ required: true, message: '账号名不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  checkPass: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ]
};

const login = () => {
  router.push('/student-login')
};

// 提交表单方法
const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      try {
        // 这里添加表单提交的逻辑，如发送请求到后端
        ElMessage.success('注册成功！');
      } catch (error) {
        ElMessage.error('注册失败，请稍后再试！');
      }
    } else {
      ElMessage.error('请检查表单填写！');
    }
  });
};

// 重置表单方法
const handleReset = () => {
  ruleFormRef.value.resetFields();
};
</script>

<style scoped>

h2 {
  text-align: center;
  margin-bottom: 20px;
}


</style>